import notfound from '@/assets/404.png';
import TopBar from '@/components/TopBar';
import { jumpUrl } from '@/utils';
import { Button, Flex } from 'antd';
import React from 'react';
import { useIntl } from 'umi';

const NotFound: React.FC = () => {
  const intl = useIntl();
  return (
    <div>
      <div className="common">
        <TopBar dark />
        <Flex justify="center" style={{ height: 'calc(100vh - 60px)' }} align="center">
          <img src={notfound} width={484} height={457} />
          <div style={{ width: 344 }}>
            <div style={{ fontSize: 60, color: '#1d2129', marginBottom: 5 }}>404</div>
            <div style={{ fontSize: 18, color: '#4e5969' }}>
              {intl.formatMessage({ id: 'home.not_exist' })}
            </div>
            <div style={{ borderBottom: '1px dashed #E5E5E5' }}>
              <Button
                style={{
                  margin: '30px 0 20px',
                  height: 36,
                  minWidth: 96,
                }}
                onClick={() => {
                  jumpUrl('/');
                }}
                type="primary"
              >
                {intl.formatMessage({ id: 'center.backhome' })}
              </Button>
            </div>
            <div style={{ color: '#4E5969', marginTop: 20 }}>
              {intl.formatMessage({ id: 'home.check_url' })}
            </div>
          </div>
        </Flex>
      </div>
    </div>
  );
};

export default NotFound;
